<template>
  <div class="app-container">
    <div style="display:flex;margin-bottom:20px;">
      <div>
        <el-input v-model="param.search" size="small" :clearable="true" placeholder="请输入参赛名称" />
      </div>
      <div style="margin-left:20px">
        <el-button type="primary" size="small" icon="el-icon-search" @click="searchList">搜索</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" style="margin-bottom:20px" @click="addMatch">添加赛事</el-button>
      </div>
    </div>
    <!-- 添加赛事 -->
    <el-dialog title="添加赛事" :visible.sync="showAdd">
      <el-form ref="Addform" :model="Addform" label-width="120px">
        <el-form-item label="赛事名称">
          <el-input v-model="Addform.name" />
        </el-form-item>
        <el-form-item label="赛事编号">
          <el-input v-model="Addform.num" />
        </el-form-item>
        <el-form-item label="赛事类型">
          <el-input v-model="Addform.gametype" />
        </el-form-item>
        <el-form-item label="赛事主图地址">
          <el-input v-model="Addform.url" />
        </el-form-item>
        <el-form-item label="开始报名时间">
          <el-col :span="11">
            <el-date-picker v-model="Addform.starttime" type="date" placeholder="赛事时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item label="结束报名时间">
          <el-col :span="11">
            <el-date-picker v-model="Addform.endtime" type="date" placeholder="赛事开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item label="赛事开始时间">
          <el-col :span="11">
            <el-date-picker v-model="Addform.startmatch" type="date" placeholder="赛事开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item label="赛事结束时间">
          <el-col :span="11">
            <el-date-picker v-model="Addform.endmatch" type="date" placeholder="赛事开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmitAdd('Addform')">确 定</el-button>
        <el-button @click="showAdd = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑赛事 -->
    <el-dialog title="编辑赛事" :visible.sync="dialogFormVisible">
      <el-form ref="EditForm" :model="EditForm" label-width="120px">
        <el-form-item label="赛事名称">
          <el-input v-model="EditForm.name" />
        </el-form-item>
        <el-form-item label="赛事编号">
          <el-input v-model="EditForm.num" />
        </el-form-item>
        <el-form-item label="赛事类型">
          <el-input v-model="EditForm.gametype" />
        </el-form-item>
        <el-form-item label="赛事主图地址">
          <el-input v-model="EditForm.url" />
        </el-form-item>
        <el-form-item label="开始报名时间">
          <el-col :span="11">
            <el-date-picker v-model="EditForm.starttime" type="date" placeholder="赛事时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item label="结束报名时间">
          <el-col :span="11">
            <el-date-picker v-model="EditForm.endtime" type="date" placeholder="赛事开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item label="赛事开始时间">
          <el-col :span="11">
            <el-date-picker v-model="EditForm.startmatch" type="date" placeholder="赛事开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item label="赛事结束时间">
          <el-col :span="11">
            <el-date-picker v-model="EditForm.endmatch" type="date" placeholder="赛事开始时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmitEdit('EditForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 赛事列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95" prop="id" />
      <el-table-column label="赛事名称" prop="name" width="150px" show-overflow-tooltip align="center" />
      <el-table-column label="赛事编号" prop="num" width="120px" align="center" />
      <el-table-column class-name="status-col" label="赛事状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status == 1 ? '正常' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="赛事类型" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gametype }}</span>
        </template>
      </el-table-column>
      <el-table-column label="赛事主图地址" prop="url" width="180px" align="center" />
      <el-table-column label="开始报名时间" prop="starttime" width="160px" align="center" />
      <el-table-column label="结束报名时间" prop="endtime" width="160px" align="center" />
      <el-table-column label="赛事开始时间" prop="startmatch" width="160px" align="center" />
      <el-table-column label="赛事结束时间" prop="endmatch" width="160px" align="center" />
      <el-table-column align="center" prop="created_at" label="创建时间" width="200" />
      <el-table-column align="center" prop="updated_at" label="更新时间" width="200" />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editInfo(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="param.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="param.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top:20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getList } from '@/api/match'
import { addList } from '@/api/match'
import { editList } from '@/api/match'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      showAdd: false,
      dialogFormVisible: false,
      param: {
        search: '',
        page: 1,
        limit: 10
      },
      total: 1,
      Addform: {
        name: '',
        num: '',
        gametype: '',
        url: '',
        starttime: '',
        endtime: '',
        startmatch: '',
        endmatch: ''
      },
      EditForm: {
        name: '',
        num: '',
        gametype: '',
        url: '',
        starttime: '',
        endtime: '',
        startmatch: '',
        endmatch: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    addMatch() {
      this.showAdd = true
    },
    // 搜索
    searchList() {
      this.fetchData()
    },
    // 确认添加赛事
    onSubmitAdd() {
      this.$refs.Addform.validate((valid) => {
        if (valid) {
          addList(this.Addform).then((res) => {
            console.log(res, 111)
            if (res.code == 20000) {
              this.showAdd = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '添加失败',
                type: 'error'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击确定修改
    onSubmitEdit(EditForm) {
      this.$refs[EditForm].validate((valid) => {
        if (valid) {
          editList(this.EditForm).then((res) => {
            console.log(res, 111)
            if (res.code == 20000) {
              this.dialogFormVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '修改失败',
                type: 'error'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编辑页面
    editInfo(info) {
      this.dialogFormVisible = true
      this.EditForm = info
    },
    handleSizeChange(val) {
      this.param.limit = val
      this.fetchData()
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.param.page = val
      this.fetchData()
      // console.log(`当前页: ${val}`)
    },
    fetchData() {
      this.listLoading = true
      getList(this.param).then(response => {
        this.list = response.data.data
        this.listLoading = false
        this.total = response.data.total
      })
    }
  }
}
</script>
